<template>
    <view :class="ns.b()">
        <view v-if="title" class="i-module-head">
            <view class="title">{{ title }}</view>
            <view class="option">
                <slot name="option" />
            </view>
        </view>
        <view v-if="isLoading" class="i-module__loading">
            <slot name="loading">
                <view class="i-module__loading-content">
                    <text>加载中...</text>
                </view>
            </slot>
        </view>
        <view v-else-if="isError" class="i-module__error">
            <slot name="error">
                <view class="i-module__error-content">
                    <text>加载失败</text>
                    <button class="i-module__error-btn" @click="$emit('retry')">重试</button>
                </view>
            </slot>
        </view>
        <view v-else class="i-module__content">
            <slot></slot>
        </view>
    </view>
</template>

<script setup lang="ts">
import type { Ref } from "vue";
import { useNamespace } from "@/hooks";

const ns = useNamespace("module");

defineProps<{
    title?: string;
    isLoading?: boolean | Ref<boolean>;
    isError?: boolean | Ref<boolean>;
}>();

defineEmits<{
    (e: "retry"): void;
}>();
</script>

<style lang="scss" scoped>
@import "./index";
</style>
